<template>
    <div class="qzms">
      <!-- 群主模式 -->

        <p class="t_list_caption text-center" @click="showList" style="margin: 15px 0px 2px;line-height: 30px;">群主模式</p>

        <div  v-show="show">
            <div class="choose">
                <div class="choose_one">
                    <p class="yellowColor text-center">单双大小</p>
                    <ul>
                        <li v-for="(ds,index) in dssize" :key="index" @click="choose(1,index,ds)"><button :class="(initactive['type'] == 1 && initactive['ind'] == index) ? 'activestyle' : ''">{{ds}}</button></li>
                    </ul> 
                </div>
                <div class="choose_two">
                    <p class="yellowColor text-center">色波</p>
                    <ul>
                        <li v-for="(bo,index) in colorb" :key="index" @click="choose(2,index,bo)"><button :class="(initactive['type'] == 2 && initactive['ind'] == index) ? 'activestyle' : ''">{{bo}}</button></li>
                    </ul>
                </div>
            </div>
            <div class="choose_three">
                <p class="yellowColor text-center">半波</p>
                <ul>
                    <li v-for="(col,index) in colorsize" :key="index" @click="choose(3,index,col)"><button :class="(initactive['type'] == 3 && initactive['ind'] == index) ? 'activestyle' : ''">{{col}}</button></li>
                </ul> 
            </div>     
            <div class="choose">
                <div class="choose_one" style="width: 250px;">
                    <p class="yellowColor text-center">头</p>
                    <ul>
                        <li v-for="(hea,index) in headnum" :key="index" @click="choose(4,index,hea)"><button :class="(initactive['type'] == 4 && initactive['ind'] == index) ? 'activestyle' : ''">{{hea}}</button></li>
                    </ul>
                </div>
                <div class="choose_two" style="width: 455px;">
                    <p class="yellowColor text-center">尾</p>
                    <ul>
                        <li v-for="(foo,index) in footernum" :key="index" @click="choose(5,index,foo)"><button :class="(initactive['type'] == 5 && initactive['ind'] == index) ? 'activestyle' : ''">{{foo}}</button></li>
                    </ul>
                </div>
            </div>
            <div class="choose_three">
                <p class="yellowColor text-center">生肖</p>
                <ul>
                    <li v-for="(ani,index) in animal" :key="index" @click="choose(6,index,ani)"><button :class="(initactive['type'] == 6 && (nowshengxiaoArr.indexOf(index) != -1)) ? 'activestyle' : ''">{{ani}}</button></li>
                </ul>
            </div>      
            <ul class="choose_way">
                <li><button @click="allchoose">全选</button></li>
                <li><button @click="reversechoose">反选</button></li>
                <li><button @click="cancel">取消</button></li>
            </ul>
        </div>
       
    </div> 
</template>
<style scoped>
    .yellowColor{
        background: #E9BA84;
        color: #fff;
        line-height: 22px;
    }
    .choose_two{
        width: 255px;
    }
    .activestyle{
        color: red;
    }
</style>

<script>

    export default {
        name: "qzms",
        data(){
            return {
                dssize:["单码","双码","大码","小码","小单","小双","大单","大双","合单","合双","合大","合小"],
                colorsize:["红单","红双","红大","红小","绿单","绿双","绿大","绿小","蓝单","蓝双","蓝大","蓝小"],
                headnum:["0头","1头","2头","3头","4头"],
                footernum:["0尾","1尾","2尾","3尾","4尾","5尾","6尾","7尾","8尾","9尾"],
                animal:["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"], 
                colorb: ['红波','绿波','蓝波'],
                show: false,
                initactive: {
                    ind: -1,  //下标
                    type: -1,  //类型
                },
                nowshengxiaoArr: [],
            }
        },
        methods:{
            showList(){
                this.show=!this.show;
            },
            choose(type,ind,item){

                this.initactive.ind = ind;
                this.initactive.type = type;
                if(this.initactive.type != 6){
                    this.nowshengxiaoArr = [];
                }else{
                    this.nowshengxiaoArr.push(ind);
                }
                
                this.$emit("changeColor",item);

            },
            //取消
            cancel(){
                
                this.initactive.ind = -1;
                this.initactive.type = -1;
                this.nowshengxiaoArr = [];
                this.$emit("changeColor",'');
            }, 
            //全选
            allchoose(){
                this.initactive.ind = -1;
                this.initactive.type = -1;
                this.nowshengxiaoArr = [];
                this.$emit("changeColor",'all');
            },  
            //反选
            reversechoose(){
                
                this.initactive.ind = -1;
                this.initactive.type = -1;
                this.nowshengxiaoArr = [];
                this.$emit("changeColor",'reverse');
            },
        }
    }
</script>
       